<template>
	<view class="publishShop">
		<u-navbar title="发布商品" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<form class="form" @submit="formSubmit">
			<div class="card">
				<view class="uni-form-item uni-column">
					<view class="title">商品标题
						<view class="valate-icon">*</view>
					</view>
					<input class="uni-input" name="title" placeholder="添加标题" />
				</view>
				<view class="uni-form-item uni-column" style="border: none;">
					<textarea name="info" placeholder="建议填写商品的名称、特征、卖点等信息不超过60个字" maxlength="60" />
				</view>
				<view class="upload-list">
					<view class="addUpload-card">
						<view class="center">
							<image class="add-icon" src="/static/images/add-icon.png"></image>
							<text>主图</text>
						</view>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">商品类目
						<view class="valate-icon">*</view>
					</view>
					<input class="uni-input" name="category" placeholder="请选择商品类目" />
					<image class="arrow-icon" src="/static/images/arrow-right-bold.png"></image>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">商品属性</view>
					<input class="uni-input" name="property" placeholder="请选择商品属性" />
					<image class="arrow-icon" src="/static/images/arrow-right-bold.png"></image>
				</view>
				<view class="uni-form-item uni-column" style="border: none;">
					<view class="title">商品详情
						<view class="valate-icon">*</view>
					</view>
				</view>
				<view class="upload-list" style="border-bottom: 2rpx solid #E1E1E1;">
					<view class="addUpload-card">
						<div class="center">
							<image class="add-icon" src="/static/images/add-icon.png"></image>
							<text>详情页</text>
						</div>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">商品规格</view>
					<input class="uni-input" name="title" placeholder="请选择商品规格" />
					<image class="arrow-icon" src="/static/images/arrow-right-bold.png"></image>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">售价
						<view class="valate-icon">*</view>
					</view>
					<input class="uni-input" type="digit" name="price" placeholder="必须大于0,最多保留2位小数/元" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">库存
						<view class="valate-icon">*</view>
					</view>
					<input class="uni-input" type="number" name="repertory" placeholder="必须大于0或等于0的整数/件" />
				</view>

				<button class="submit-btn" form-type="submit">提交</button>
			</div>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			handleUpload() {

			},
			// uni.chooseImage({
			//   success: function (res) {
			//     var tempFilePaths = res.tempFilePaths;
			//     uni.saveFile({
			//       tempFilePath: tempFilePaths[0],
			// fileType: 'image',
			// filePath: url,
			// header: {
			// 	'Accept': 'application/json',
			// 	'Content-Type': 'multipart/form-data',
			// 	'Authorization': 'Bearer ' + this.$db.get('userToken')
			// },
			// name: 'file',
			//       success: function (res) {
			//         var savedFilePath = res.savedFilePath;
			//       }
			//     });
			//   }
			// });
			formSubmit(data) { // 提交
				console.log(data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff !important;
	}

	.publishShop {
		padding: 14rpx 26rpx;

		.submit-btn {
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 60rpx;
			width: 90vw;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 36rpx;
			background-color: #D0241C;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}


		.form {
			padding: 20rpx 28rpx;

			.uni-form-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 28rpx 0;
				border-bottom: 2rpx solid #E1E1E1;

				textarea {
					width: 100%;
					height: 90rpx;
				}

				.title {
					position: relative;
					// padding-right: 100rpx;
				}

				.uni-input {
					width: 70%;
					text-align: right;
				}

				.valate-icon {
					position: absolute;
					top: 1rpx;
					right: -20rpx;
					color: #D0241C;
					font-size: 26rpx;
					margin-left: 8rpx;
				}

				.arrow-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}


		.upload-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 28rpx;

			.addUpload-card {
				width: 25%;
				height: 180rpx;
				border: 3rpx dashed #E0E0E0;
				display: flex;
				justify-content: center;
				align-items: center;

				.center {
					display: flex;
					flex-direction: column;
					align-items: center;

					.add-icon {
						width: 80rpx;
						height: 80rpx;
					}

					text {
						margin-top: 12rpx;
						color: #DEDEDE;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>